<template>
  <div class="flex items-center justify-center bg-gray-100">
    <div class="text-center p-8 rounded-lg shadow-md bg-white max-w-md">
      <h1 class="text-9xl font-extrabold text-gray-400">404</h1>
      <p class="text-2xl font-bold text-gray-800 mt-4">页面未找到</p>
      <p class="text-xl text-gray-600 mt-2 mb-8">对不起，您请求的页面不存在。</p>
      <router-link to="/" class="inline-block px-6 py-3 text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors duration-300">
        返回首页
      </router-link>
    </div>
  </div>
</template>

<script lang='ts'>
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'page404',
  data() {
    return {}
  },
  components: {}

})
</script>

<style scoped>
</style>
